@use './variables.scss' as *;

// 工具类样式

// 文本颜色
.text-primary {
  color: var(--primary-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-success {
  color: var(--success-color) !important;
}

.text-warning {
  color: var(--warning-color) !important;
}

.text-danger {
  color: var(--error-color) !important;
}

.text-info {
  color: var(--info-color) !important;
}

.text-muted {
  color: var(--text-color-secondary) !important;
}

// 背景颜色
.bg-primary {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
  color: white !important;
}

.bg-success {
  background-color: var(--success-color) !important;
  color: white !important;
}

.bg-warning {
  background-color: var(--warning-color) !important;
  color: white !important;
}

.bg-danger {
  background-color: var(--error-color) !important;
  color: white !important;
}

.bg-info {
  background-color: var(--info-color) !important;
  color: white !important;
}

.bg-light {
  background-color: var(--bg-color-secondary) !important;
}

.bg-dark {
  background-color: var(--gray-800) !important;
  color: white !important;
}

// 字体大小
.text-xs {
  font-size: $font-size-xs !important;
}

.text-sm {
  font-size: $font-size-sm !important;
}

.text-base {
  font-size: $font-size-base !important;
}

.text-lg {
  font-size: $font-size-lg !important;
}

.text-xl {
  font-size: $font-size-xl !important;
}

.text-2xl {
  font-size: $font-size-2xl !important;
}

.text-3xl {
  font-size: $font-size-3xl !important;
}

.text-4xl {
  font-size: $font-size-4xl !important;
}

.text-5xl {
  font-size: $font-size-5xl !important;
}

// 字体粗细
.font-light {
  font-weight: $font-weight-light !important;
}

.font-normal {
  font-weight: $font-weight-normal !important;
}

.font-medium {
  font-weight: $font-weight-medium !important;
}

.font-semibold {
  font-weight: $font-weight-semibold !important;
}

.font-bold {
  font-weight: $font-weight-bold !important;
}

// 文本对齐
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

// 文本装饰
.text-underline {
  text-decoration: underline !important;
}

.text-line-through {
  text-decoration: line-through !important;
}

.text-no-underline {
  text-decoration: none !important;
}

// 文本转换
.text-uppercase {
  text-transform: uppercase !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

// 行高
.leading-tight {
  line-height: $line-height-tight !important;
}

.leading-snug {
  line-height: $line-height-snug !important;
}

.leading-normal {
  line-height: $line-height-normal !important;
}

.leading-relaxed {
  line-height: $line-height-relaxed !important;
}

.leading-loose {
  line-height: $line-height-loose !important;
}

// 文本溢出
.text-ellipsis {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.text-clip {
  text-overflow: clip !important;
}

// 空白处理
.whitespace-normal {
  white-space: normal !important;
}

.whitespace-nowrap {
  white-space: nowrap !important;
}

.whitespace-pre {
  white-space: pre !important;
}

.whitespace-pre-line {
  white-space: pre-line !important;
}

.whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

// 边框
.border {
  border: 1px solid var(--border-color) !important;
}

.border-0 {
  border: 0 !important;
}

.border-t {
  border-top: 1px solid var(--border-color) !important;
}

.border-r {
  border-right: 1px solid var(--border-color) !important;
}

.border-b {
  border-bottom: 1px solid var(--border-color) !important;
}

.border-l {
  border-left: 1px solid var(--border-color) !important;
}

// 边框颜色
.border-primary {
  border-color: var(--primary-color) !important;
}

.border-secondary {
  border-color: var(--secondary-color) !important;
}

.border-success {
  border-color: var(--success-color) !important;
}

.border-warning {
  border-color: var(--warning-color) !important;
}

.border-danger {
  border-color: var(--error-color) !important;
}

.border-info {
  border-color: var(--info-color) !important;
}

// 圆角
.rounded-none {
  border-radius: 0 !important;
}

.rounded-sm {
  border-radius: $border-radius-sm !important;
}

.rounded {
  border-radius: $border-radius-base !important;
}

.rounded-md {
  border-radius: $border-radius-md !important;
}

.rounded-lg {
  border-radius: $border-radius-lg !important;
}

.rounded-xl {
  border-radius: $border-radius-xl !important;
}

.rounded-2xl {
  border-radius: $border-radius-2xl !important;
}

.rounded-3xl {
  border-radius: $border-radius-3xl !important;
}

.rounded-full {
  border-radius: $border-radius-full !important;
}

// 阴影
.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: $shadow-sm !important;
}

.shadow {
  box-shadow: $shadow-base !important;
}

.shadow-md {
  box-shadow: $shadow-md !important;
}

.shadow-lg {
  box-shadow: $shadow-lg !important;
}

.shadow-xl {
  box-shadow: $shadow-xl !important;
}

.shadow-2xl {
  box-shadow: $shadow-2xl !important;
}

.shadow-inner {
  box-shadow: $shadow-inner !important;
}

// 透明度
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

// 可见性
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

// 光标
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-text {
  cursor: text !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-wait {
  cursor: wait !important;
}

// 用户选择
.select-none {
  user-select: none !important;
}

.select-text {
  user-select: text !important;
}

.select-all {
  user-select: all !important;
}

.select-auto {
  user-select: auto !important;
}

// 指针事件
.pointer-events-none {
  pointer-events: none !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

// 对象适应
.object-contain {
  object-fit: contain !important;
}

.object-cover {
  object-fit: cover !important;
}

.object-fill {
  object-fit: fill !important;
}

.object-none {
  object-fit: none !important;
}

.object-scale-down {
  object-fit: scale-down !important;
}

// 对象位置
.object-bottom {
  object-position: bottom !important;
}

.object-center {
  object-position: center !important;
}

.object-left {
  object-position: left !important;
}

.object-left-bottom {
  object-position: left bottom !important;
}

.object-left-top {
  object-position: left top !important;
}

.object-right {
  object-position: right !important;
}

.object-right-bottom {
  object-position: right bottom !important;
}

.object-right-top {
  object-position: right top !important;
}

.object-top {
  object-position: top !important;
}

// 溢出
.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

// 滚动行为
.scroll-smooth {
  scroll-behavior: smooth !important;
}

.scroll-auto {
  scroll-behavior: auto !important;
}

// 截断
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

// 清除浮动
.clearfix {
  @include clearfix;
}

// 屏幕阅读器
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
} 